import React, {JSX} from 'react';
import {Svg, G, Defs, Path, ClipPath, Rect} from 'react-native-svg';
import {BasicsProps} from './type';

type Props = {
  color?: string;
} & BasicsProps;

const NextIcon = ({size = '36', color = '#fff'}: Props): JSX.Element => {
  return (
    <Svg width={size} height={size} viewBox="0 0 36 36" fill="none">
      <G
        id="&#228;&#184;&#139;&#228;&#184;&#128;&#233;&#155;&#134;icon"
        clip-path="url(#clip0_36_370)">
        <G id="Frame" clip-path="url(#clip1_36_370)">
          <G id="Vector" filter="url(#filter0_d_36_370)">
            <Path
              d="M22.7959 15.0516L12.0137 7.41719C9.83245 5.87281 6.81714 7.4325 6.81714 10.105V25.8009C6.81714 28.4734 9.83245 30.0331 12.0137 28.4887L22.7959 20.8541C24.7965 19.4372 24.7965 16.4684 22.7959 15.0516ZM27.3693 29.1412C26.42 29.1412 25.6506 28.3719 25.6506 27.4225V8.48312C25.6506 7.53375 26.42 6.76437 27.3693 6.76437C28.3187 6.76437 29.0881 7.53375 29.0881 8.48312V27.4228C29.0881 28.3719 28.3187 29.1412 27.3693 29.1412Z"
              fill={color}
            />
          </G>
        </G>
      </G>
      <Defs>
        <ClipPath id="clip0_36_370">
          <Rect width="36" height="36" fill="white" />
        </ClipPath>
        <ClipPath id="clip1_36_370">
          <Rect
            width="32"
            height="32"
            fill="white"
            transform="translate(2 2)"
          />
        </ClipPath>
      </Defs>
    </Svg>
  );
};

export default NextIcon;
